<template>
	<view class="content">
		<navigator :url="'/pages/rural_tourism/detail?id='+item.id" v-for="(item,index) in list" :key="item.id"
			class="list-item">
			<image :src="item.picUrl" mode="widthFix" class="cover-photo">
				<view class="title">{{item.scenicDescribe}}</view>
				<view class="other">{{item.scenicName}}</view>
			</image>
		</navigator>
	</view>
</template>

<script>
	import {
		getScenicList
	} from '@/api/rural_tourism.js';
	export default {
		data() {
			return {
				list: []
			}
		},
		methods: {
			findList() {
				getScenicList({
					page: 0,
					limit: 0
				}).then((res) => {
					if (res.code == 1) {
						if (res.data != null) {
							this.list = res.data;
						}
					} else {
						console.log(res)
					}
				}).catch((res) => {
					console.log(res)
				})
			},
		},
		onLoad() {

		},
		onShow() {
			this.findList();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.list-item {
			width: 100%;
			position: relative;
			margin-bottom: 20rpx;

			.cover-photo {
				width: 100%;
				height: auto;
				border-radius: 10rpx;
			}

			.title,
			.other {
				position: absolute;
				left: 30rpx;
				color: #fff;
				text-shadow: 1px 1px 3px #000;
			}

			.title {
				font-size: 36rpx;
				top: 30rpx;
				font-weight: bold;
			}

			.other {
				top: 100rpx;
				font-size: 30rpx;
			}
		}

		.list-item:last-child {
			margin-bottom: 0;
		}
	}
</style>